<template>
  <div id="app-container" style="padding:30px;">

    <!-- 查询表单 -->
    <el-form :inline="true" class="demo-form-inline">
      <el-form-item label="指令名称" style="margin-right: 180px">
        <el-input v-model="dispOrdQuery.orderName" placeholder="指令名称" />
      </el-form-item>
<!--      根据专业类型查询-->
      <el-form-item label="专业类型" style="margin-right: 180px">
        <el-input v-model="dispOrdQuery.specType" placeholder="专业类型" />

      </el-form-item>
<!--      <el-form-item label="创建时间">-->
<!--        <el-date-picker-->
<!--          v-model="dispOrdQuery.gmtCreate"-->
<!--          type="datetime"-->
<!--          placeholder="选择开始时间"-->
<!--          value-format="yyyy-MM-dd HH:mm:ss"-->
<!--          default-time="00:00:00"-->
<!--        />-->
<!--      </el-form-item>-->
<!--      <el-form-item>-->
<!--        <el-date-picker-->
<!--          v-model="dispOrdQuery.gmtModified"-->
<!--          type="datetime"-->
<!--          placeholder="选择截止时间"-->
<!--          value-format="yyyy-MM-dd HH:mm:ss"-->
<!--          default-time="00:00:00"-->
<!--        />-->
<!--      </el-form-item>-->
      <el-button type="primary" @click="excelDialogVisible = true" style="margin-right: 50px">导入</el-button>
      <el-button type="primary" @click="exportExcel()" style="margin-right: 50px">导出</el-button>
      <el-button type="primary" @click="getPageDispOrdList()"style="margin-right: 50px" >查询</el-button>
      <el-button type="primary" @click="resetData()" style="margin-right: 50px">重置</el-button>
    </el-form>

    <!-- 列表 -->
    <el-table :data="dispOrdList" border fit highlight-current-row @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" />
      <el-table-column label="序号" width="70" align="center">
        <template slot-scope="scope">
          {{ (pageNo - 1) * pageSize + scope.$index + 1 }}
        </template>
      </el-table-column>
      <el-table-column prop="orderName" label="指令名称" width="80" />
      <el-table-column label="优先级">
        <template slot-scope="scope">
          {{
            scope.row.priority === 1 ? '一级' :
              scope.row.priority === 2 ? '二级' :
                scope.row.priority === 3 ? '三级' : '四级'
          }}
        </template>
      </el-table-column>
      <el-table-column label="专业类型">
        <template slot-scope="scope">
          {{
            scope.row.specType === 1 ? '生产调度指令' :
              scope.row.specType === 2 ? '安全调度指令' :
                scope.row.specType === 3 ? '开工调度指令' : '培训调度指令'
          }}
        </template>
      </el-table-column>
      <el-table-column prop="orderDesc" label="指令描述" />
    </el-table>

    <!-- 分页 -->
    <el-pagination
      :page-size="pageSize"
      :current-page="pageNo"
      :total="total"
      :pager-count="11"
      style="padding: 30px 0; text-align: center;"
      layout="total, prev, pager, next, jumper"
      @current-change="getPageDispOrdList">
    </el-pagination>

    <!-- 操作按钮 -->
    <el-row>
      <el-col :span="2" :offset="8">
        <el-button type="primary" @click="toCreateDispOrd()">创建</el-button>
      </el-col>
      <el-col :span="2">
        <el-button type="primary" @click="toUpdateDispOrd()" :disabled="this.multipleSelection.length === 0 || this.multipleSelection.length > 1">修改</el-button>
      </el-col>
      <el-col :span="2">
        <el-button type="primary" @click="deleteDispOrd()" :disabled="this.multipleSelection.length === 0 || this.multipleSelection.length > 1">删除</el-button>
      </el-col>
    </el-row>

    <!-- 创建对话框 -->
    <el-dialog
      title="增加集团调度指令信息"
      :visible.sync="createDialogVisible"
      width="50%">
      <el-form label-width="130px">
        <el-row>
          <el-col :span="12">
            <el-form-item label="优先级">
              <el-select v-model="dispOrd.priority" clearable placeholder="请选择">
                <el-option :value="1" label="一级"/>
                <el-option :value="2" label="二级"/>
                <el-option :value="3" label="三级"/>
                <el-option :value="4" label="四级"/>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="专业类型">
              <el-select v-model="dispOrd.specType" clearable placeholder="请选择">
                <el-option :value="1" label="生产调度指令"/>
                <el-option :value="2" label="安全调度指令"/>
                <el-option :value="3" label="开工调度指令"/>
                <el-option :value="4" label="培训调度指令"/>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="指令名称">
              <el-input v-model="dispOrd.orderName"/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="指令描述">
              <el-input v-model="dispOrd.orderDesc" :rows="10" type="textarea"/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="3" :offset="5">
            <el-form-item>
              <el-button :disabled="saveBtnDisabled" type="primary" @click="saveDispOrd()">保存</el-button>
            </el-form-item>
          </el-col>
          <el-col :span="3">
            <el-form-item>
              <el-button type="primary" @click="createDialogVisible = false">返回</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-dialog>
<!--    导入对话框-->
    <el-dialog
      title="提示"
      :visible.sync="excelDialogVisible"
      width="30%">
      <el-upload
        class="upload-demo"
        ref="upload"
        name="file"
        :action="BASE_API + '/pms/dispord/importEasyExcel'"
        :on-success="handleSuccess"
        :on-error="handleError"
        :file-list="1"
        :disabled="importBtnDisabled"
        :auto-upload="false">
        <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
        <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传到服务器</el-button>
      </el-upload>
    </el-dialog>

  </div>
</template>

<script>
import dispord from '@/api/pms/dispord'
export default {
  data() { // ## 定义变量和初始值
    return {
      dispOrdList: null, // ## 数据列表  (要展示到页面上）
      dispOrdQuery: {
        // orderName: ''
      }, // ##查询条件封装对象
      total: 0, // ## 总记录数
      pageNo: 1, // ## 页码
      pageSize: 3, // ## 每页显示记录数
      multipleSelection: [], // ## 记录表格复选框选中的值
      createDialogVisible: false,  //控制对话的开与关
      dispOrd: {},  //新增参数  对应后端的传入的参数 加入对应的属性值  可以不加
      saveBtnDisabled: false,
      BASE_API: process.env.VUE_APP_BASE_API, // ## 接口API地址
      excelDialogVisible: false, // ## 导入Excel窗口, false为关闭
      importBtnDisabled: false, // ## 按钮是否禁用,false为不禁用

    }
  },
  // 一上来就查询
  created() {
    this.getPageDispOrdList()
  },
  methods: { // ## 创建具体的方法,调用 dispord.js 定义的方法
    getPageDispOrdList(pageNo = 1) { // ## 调用 api 获取数据
      this.pageNo = pageNo
      dispord.findPageDispOrd(this.dispOrdQuery, this.pageNo, this.pageSize)
        // 成功之后执行的方法
        .then(response => {
          this.dispOrdList = response.data.items
          this.total = response.data.total
        })
    },
    handleSelectionChange(val) { // ## 复选框改变时触发该事件
      this.multipleSelection = val
    },
    // 重置
    resetData() { // ## 清空方法
      // ## 清空所有值
      this.dispOrdQuery = {}
      // ## 查询所有数据
      this.getPageDispOrdList()
    },
    //添加按钮方法
    toCreateDispOrd(){
      // 打开窗口前 清空数据
      this.dispOrd = {}
      this.createDialogVisible = true   // 开对话窗口
    },
    // 增加的保存方法
    saveDispOrd(){
      //禁用按钮
      this.saveBtnDisabled = true
      dispord.saveDispOrd(this.dispOrd)
      .then(response => {
        // 关闭窗口
        this.createDialogVisible = false
        //消息提示
        this.$message({
          type: 'success',
          message: '保存成功'
        })
        // 重新查询
        this.getPageDispOrdList()
      })
    },
    // ## 此方法写入到 list.vue 的 method 当中
    toUpdateDispOrd() { // ## 跳转到修改调度指令库管理页面
                        // ## 获取所有选中行的id组成的字符串，以逗号分隔   只会得到一条数据
      var ids = this.multipleSelection.map(item => item.id).join()
      // ## 跳转 到修改页面
      this.$router.push('/dispord/update/' + ids) // 跳转到修改页面
    },
    // 删除方法
    deleteDispOrd() {

        this.$confirm('此操作将永久删除该记录, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          // this.$message({
          //   type: 'success',
          //   message: '删除成功!'
          // });

          //获取id
          var ids = this.multipleSelection.map(item => item.id).join()
          dispord.deleteDisOrd(ids)
            .then(response => {
              // 是否确认删除 提示
              this.$message({
                type: 'success',
                message: '删除成功'
              })
              //重新查询所有数据 分页
              this.getPageDispOrdList()
            })

        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
    },
    exportExcel() { // ## 导出Excel
      document.location.href = this.BASE_API + '/pms/dispord/exportEasyExcel'
    },
    // 上传
    submitUpload() {
      this.$refs.upload.submit();
    },
    // 成功后执行的方法
    handleSuccess(){
      // 关闭对话框
      this.excelDialogVisible = false
      // 提示消息
      this.$message({
        type: 'success',
        message: '导入成功'
      })
      // 重新查询所有的
      this.getPageDispOrdList()
    },

    // 失败后执行的
    handleError(){
      // 提示消息
      this.$message({
        type: 'success',
        message: '导入失败'
      })
    }
  },

}

</script>


